<!DOCTYPE html>
<html>
<head>
<title>Energy Level Diagram</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="600" style="border:1px solid #d3d3d3;"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// Style settings
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';
ctx.lineWidth = 2;
ctx.font = '22px Arial';
ctx.textBaseline = 'middle';

// --- Draw energy axis ---
ctx.beginPath();
ctx.moveTo(100, 560);
ctx.lineTo(100, 40);
// Arrowhead
ctx.moveTo(100, 40);
ctx.lineTo(95, 55);
ctx.moveTo(100, 40);
ctx.lineTo(105, 55);
ctx.stroke();

// --- Axis label ---
ctx.textAlign = 'center';
ctx.fillText('energy', 60, 300);

// --- Draw energy levels and labels ---
ctx.textAlign = 'left';

function drawLevel(y, label) {
    ctx.beginPath();
    ctx.moveTo(150, y);
    ctx.lineTo(400, y);
    ctx.stroke();
    // Using an en dash '–' for the minus sign
    ctx.fillText(label, 415, y);
}

drawLevel(540, '– 13.6 eV');
drawLevel(420, '– 3.4 eV');
drawLevel(320, '– 1.5 eV');
drawLevel(250, '– 0.85 eV');
drawLevel(200, '– 0.54 eV');
drawLevel(160, '– 0.38 eV');

// --- Draw figure caption ---
const captionText = "Fig. 11.2 (not to scale)";
const boldPart = "Fig. 11.2";
const regularPart = " (not to scale)";
const captionY = 580;

// Measure text widths to position them correctly for centering
ctx.font = 'bold 22px Arial';
const boldWidth = ctx.measureText(boldPart).width;
ctx.font = '22px Arial';
const regularWidth = ctx.measureText(regularPart).width;
const totalWidth = boldWidth + regularWidth;

const captionX_start = (canvas.width - totalWidth) / 2;

// Draw the caption with mixed styles
ctx.textAlign = 'left';
ctx.font = 'bold 22px Arial';
ctx.fillText(boldPart, captionX_start, captionY);
ctx.font = '22px Arial';
ctx.fillText(regularPart, captionX_start + boldWidth, captionY);

</script>
</body>
</html>